<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初识Vue</title>
    </head>
    <!-- 通过Script标签引入Vue，这样Vue会被注册成为一个全局的对象（也可以理解为函数）。 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            初始Vue：
                1.想要使用Vue来操作页面，就必须先创建一个Vue实例，且要传入一个配置对象；
                2.以下root容器中的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
                3.root容器里的代码被称为【Vue模板】；
                4.Vue实例和容器是一一对应的（一对一关系）；
                5.实际开发中只有一个Vue实例（对象），并且会配合着组件一起使用；
                6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读到data中的所有属性；
                7.一旦data中的数据发生改变，那么页面中用到该数据中的地方也会自动更新；
        -->

        <!-- 准备一个容器，由Vue来定义容器的内容。 -->
        <div id="root">
            <h1>Hello,{{name}}</h1>     <!-- 通过Vue插值语法：{{key}}，获取Vue实例中的定义的属性值 -->
            <h1>我的年龄是：{{age}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

            //创建Vue实例
            new Vue({
                el:'#root', //el表示element，用于指定当前Vue实例为哪个容器服务，值“通常”为css选择器的字符串。
                data:{      //data中用于存储数据，数据供el所指定的容器去使用，
                    name:'覃小宝',
                    age:22
                }
            })
    
        </script>
    </body>

</html>